import React from 'react';
import { Divider } from 'antd';

let keyIndex = 1;
const newIndex = () => {
    keyIndex += 1;
    return keyIndex;
};

/**
 * 解决多个按钮要自动加竖条的问题，多用于操作按钮的竖线
 * @param children
 * @param iconDivider
 * @returns {null|*}
 * @constructor
 */
const AutoDivider = ({ children, iconDivider = <Divider type="vertical" /> }) => {
    const result = [];

    // 过滤出需要显示的child
    React.Children.forEach(children, child => {
        const type = child?.type;
        const displayName = type?.displayName;
        // 过滤掉If控件且条件(condition)为false的节点
        if (!(displayName && displayName === 'If' && !child.props.condition) && child) {
            result.push(child);
        }
    });
    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            {result.map((child, index) =>
                index + 1 < result.length ? (
                    <React.Fragment key={newIndex()}>
                        {child}
                        {iconDivider}
                    </React.Fragment>
                ) : (
                    child
                )
            )}
        </div>
    );
};

AutoDivider.displayName = 'AutoDivider';

export default AutoDivider;
